<script setup>
import request5151 from "../../utils/request5151.js";
import {ref} from "vue";

const unpaid = ref(0)
const paid = ref(0)
let websocket = null;
if ('WebSocket' in window) {
  // 创建WebSocket连接
  websocket = new WebSocket('ws://localhost:5151/ws/' + "count3");
}
//连接发生错误
websocket.onerror = function (event) {
  console.log('连接错误');
};
//连接成功建立的回调方法
websocket.onopen = function (event) {
  console.log('WebSocket连接成功');
};

//接收到消息的回调方法
websocket.onmessage = function (event) {
  unpaid.value = JSON.parse(event.data).unpaid
  paid.value = JSON.parse(event.data).paid
}

//连接关闭的回调方法
websocket.onclose = function () {
  console.log("WebSocket连接关闭")
}

//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function () {
  websocket.close();
}

</script>

<template>
  <div class="payStatusCount" style="margin-left: 50px;height: 200px;color: white">
    <h3 style="color: yellow;line-height: 50px;">学费缴纳状态统计</h3>
    <h4>未缴纳学费数量：
      <i style="color: red">{{ unpaid }}</i>
    </h4>
    <h4>已缴纳学费数量：
      <i>{{ paid }}</i>
    </h4>
  </div>
</template>

<style scoped>
.payStatusCount i {
  font-size: 25px;
  color: #13ce66;
  font-weight: bolder;
}
</style>
